<template>
  <view class="main">
    <view class="title">欢迎来到Alger聊天室</view>
    <view class="avatar">
      <image
        class="avatar-img"
        :src="avatar"
        @click="avatarShow = true"
      ></image>
    </view>

    <u-popup v-model="avatarShow" mode="bottom" border-radius="50">
      <view class="pop">
        <image
          v-for="(item, index) in avatars"
          :key="index"
          :src="item"
          mode="scaleToFill"
          @click="setAvatar(item)"
        />
      </view>
    </u-popup>

    <view class="input">
      <input type="text" placeholder="请输入昵称" v-model="nickName" />
    </view>

    <view class="join" @click="join">加入</view>
  </view>
</template>

<script>
import { avatarList } from "@/utils/data.js"
export default {
  data() {
    return {
      avatars: [],
      avatar: "",
      nickName: "",
      avatarShow: false,
    }
  },
  onLoad() {
    this.getAvatar()
  },
  methods: {
    getAvatar() {
      this.avatars = avatarList
      this.avatar = this.avatars[0]
    },
    setAvatar(avatar) {
      this.avatar = avatar
      this.avatarShow = false
    },
    join() {
      this.$u.route({
        url: "/pages/index/index",
        params: {
          name: this.nickName,
          img: this.avatar,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  margin: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
  align-items: center;
  .title {
    font-size: 38rpx;
    color: #5875d6;
    font-weight: bold;
    margin-bottom: 100rpx;
  }
  .avatar {
    position: relative;
    width: 150rpx;
    height: 150rpx;
  }
  .avatar::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    // 边框透明三角形
    border: 16rpx solid;
    border-color: #5875d673 transparent transparent transparent;
    position: absolute;
    bottom: -50rpx;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
  }
  .avatar-img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 50rpx;
  }
  .input {
    width: 70%;
    background-color: #f0f0f0;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    margin-top: 50rpx;
    border-radius: 20rpx;
    input {
      flex: 1;
      text-align: center;
    }
  }
}

.join {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: #5875d6;
  color: #fff;
  text-align: center;
  line-height: 200rpx;
  margin-top: 200rpx;
  box-shadow: 5rpx 20rpx 30rpx #5875d654;
  transition: all 0.1s;
  &:active {
    transform: scale(95%);
    filter: brightness(90%);
    box-shadow: inset 5rpx 20rpx 30rpx #2e57df;
  }
}

.pop {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  image {
    width: 118rpx;
    height: 118rpx;
    border-radius: 50%;
    margin: 10rpx;
  }
}
</style>
